<style type="text/css">
    .fa-faw{
        width: 14px;
        text-align: center;
    }
    .micon-popup{
        position: absolute;
        width: 278px;
        height: 268px;
        color: #000;
        font-size: 14px;
    }
    .micon-popup:before {
        content: '';
        display: inline-block;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #ccc;
        border-bottom-color: rgba(0,0,0,0.2);
        position: absolute;
        top: -7px;
        left: 6px;
    }
    .micon-popup:after {
        content: '';
        display: inline-block;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #fff;
        position: absolute;
        top: -6px;
        left: 7px;
    }
    .micon-popup a:hover{
        background-color:#eee;
    }
    .micon-popup .micon-title{
        position: relative;
        background-color: #563d7c;
        color: #fff;
        border: 1px solid #463265;

    }
    .micon-popup .micon-title h4{
        margin: 0;
        padding: 8px 10px;
        font-size: 17px;
        font-weight: bold;
    }
    .pointer{
        cursor: pointer;
    }
    .micon-popup .ip-control{
        background-color: white;
        height: 40px;
        margin-top: -2px;
        padding-top: 2px;
        border-bottom: 1px solid #e5e5e5;
    }
    .micon-popup .ip-search{
        width: 130px;
        padding:2px 0px 5px 27px;
        margin-left: 8px;
        background-repeat: no-repeat;

    }

    .micon-popup .micon-list{position:absolute;top: 43px;bottom:0;overflow: hidden;}
    .micon-list ul{
        margin: 0;
        padding: 0;
        margin-bottom: 10px;
    }
    .micon-popup .ip-control ul{margin: 4px 0;padding: 0;}
    .micon-popup .ip-control ul li{float: left;list-style-type: none;}
    .micon-popup .ip-control ul li a{margin-top: -3px;color:#373737;}
    .micon-popup .ip-control ul li:first-child{margin-left: 3px;}
    .micon-popup .ip-control ul li:last-child{position: absolute;right: 0}

    .micon-list ul li{
        display: inline-block;
        margin: 5px;
        float: left;
        border: 1px dotted #eee;
    }

    .micon-list ul li a{
        display: block;
        text-decoration: none;
        color:#373737;
        padding: 6px 10px;
    }
    .micon-list ul li a:hover{color:#000;
        border-bottom: 0px solid;
    }
</style>
<script>
    (function($) {

        $.fn.iconPicker = function( options ) {

            var mouseOver=false;
            var $popup=null;
            var icons=new Array("address-book", "address-book-o", "address-card", "address-card-o", "bandcamp", "bath", "bathtub (alias)", "drivers-license (alias)", "drivers-license-o (alias)", "eercast", "envelope-open", "envelope-open-o", "etsy", "free-code-camp", "grav", "handshake-o", "id-badge", "id-card", "id-card-o", "imdb", "linode", "meetup", "microchip", "podcast", "quora", "ravelry", "s15 (alias)", "shower", "snowflake-o", "superpowers", "telegram", "thermometer (alias)", "thermometer-0 (alias)", "thermometer-1 (alias)", "thermometer-2 (alias)", "thermometer-3 (alias)", "thermometer-4 (alias)", "thermometer-empty", "thermometer-full", "thermometer-half", "thermometer-quarter", "thermometer-three-quarters", "times-rectangle (alias)", "times-rectangle-o (alias)", "user-circle", "user-circle-o", "user-o", "vcard (alias)", "vcard-o (alias)", "window-close", "window-close-o", "window-maximize", "window-minimize", "window-restore", "wpexplorer", "address-book", "address-book-o", "address-card", "address-card-o", "adjust", "american-sign-language-interpreting", "anchor", "archive", "area-chart", "arrows", "arrows-h", "arrows-v", "asl-interpreting (alias)", "assistive-listening-systems", "asterisk", "at", "audio-description", "automobile (alias)", "balance-scale", "ban", "bank (alias)", "bar-chart", "bar-chart-o (alias)", "barcode", "bars", "bath", "bathtub (alias)", "battery (alias)", "battery-0 (alias)", "battery-1 (alias)", "battery-2 (alias)", "battery-3 (alias)", "battery-4 (alias)", "battery-empty", "battery-full", "battery-half", "battery-quarter", "battery-three-quarters", "bed", "beer", "bell", "bell-o", "bell-slash", "bell-slash-o", "bicycle", "binoculars", "birthday-cake", "blind", "bluetooth", "bluetooth-b", "bolt", "bomb", "book", "bookmark", "bookmark-o", "braille", "briefcase", "bug", "building", "building-o", "bullhorn", "bullseye", "bus", "cab (alias)", "calculator", "calendar", "calendar-check-o", "calendar-minus-o", "calendar-o", "calendar-plus-o", "calendar-times-o", "camera", "camera-retro", "car", "caret-square-o-down", "caret-square-o-left", "caret-square-o-right", "caret-square-o-up", "cart-arrow-down", "cart-plus", "cc", "certificate", "check", "check-circle", "check-circle-o", "check-square", "check-square-o", "child", "circle", "circle-o", "circle-o-notch", "circle-thin", "clock-o", "clone", "close (alias)", "cloud", "cloud-download", "cloud-upload", "code", "code-fork", "coffee", "cog", "cogs", "comment", "comment-o", "commenting", "commenting-o", "comments", "comments-o", "compass", "copyright", "creative-commons", "credit-card", "credit-card-alt", "crop", "crosshairs", "cube", "cubes", "cutlery", "dashboard (alias)", "database", "deaf", "deafness (alias)", "desktop", "diamond", "dot-circle-o", "download", "drivers-license (alias)", "drivers-license-o (alias)", "edit (alias)", "ellipsis-h", "ellipsis-v", "envelope", "envelope-o", "envelope-open", "envelope-open-o", "envelope-square", "eraser", "exchange", "exclamation", "exclamation-circle", "exclamation-triangle", "external-link", "external-link-square", "eye", "eye-slash", "eyedropper", "fax", "feed (alias)", "female", "fighter-jet", "file-archive-o", "file-audio-o", "file-code-o", "file-excel-o", "file-image-o", "file-movie-o (alias)", "file-pdf-o", "file-photo-o (alias)", "file-picture-o (alias)", "file-powerpoint-o", "file-sound-o (alias)", "file-video-o", "file-word-o", "file-zip-o (alias)", "film", "filter", "fire", "fire-extinguisher", "flag", "flag-checkered", "flag-o", "flash (alias)", "flask", "folder", "folder-o", "folder-open", "folder-open-o", "frown-o", "futbol-o", "gamepad", "gavel", "gear (alias)", "gears (alias)", "gift", "glass", "globe", "graduation-cap", "group (alias)", "hand-grab-o (alias)", "hand-lizard-o", "hand-paper-o", "hand-peace-o", "hand-pointer-o", "hand-rock-o", "hand-scissors-o", "hand-spock-o", "hand-stop-o (alias)", "handshake-o", "hard-of-hearing (alias)", "hashtag", "hdd-o", "headphones", "heart", "heart-o", "heartbeat", "history", "home", "hotel (alias)", "hourglass", "hourglass-1 (alias)", "hourglass-2 (alias)", "hourglass-3 (alias)", "hourglass-end", "hourglass-half", "hourglass-o", "hourglass-start", "i-cursor", "id-badge", "id-card", "id-card-o", "image (alias)", "inbox", "industry", "info", "info-circle", "institution (alias)", "key", "keyboard-o", "language", "laptop", "leaf", "legal (alias)", "lemon-o", "level-down", "level-up", "life-bouy (alias)", "life-buoy (alias)", "life-ring", "life-saver (alias)", "lightbulb-o", "line-chart", "location-arrow", "lock", "low-vision", "magic", "magnet", "mail-forward (alias)", "mail-reply (alias)", "mail-reply-all (alias)", "male", "map", "map-marker", "map-o", "map-pin", "map-signs", "meh-o", "microchip", "microphone", "microphone-slash", "minus", "minus-circle", "minus-square", "minus-square-o", "mobile", "mobile-phone (alias)", "money", "moon-o", "mortar-board (alias)", "motorcycle", "mouse-pointer", "music", "navicon (alias)", "newspaper-o", "object-group", "object-ungroup", "paint-brush", "paper-plane", "paper-plane-o", "paw", "pencil", "pencil-square", "pencil-square-o", "percent", "phone", "phone-square", "photo (alias)", "picture-o", "pie-chart", "plane", "plug", "plus", "plus-circle", "plus-square", "plus-square-o", "podcast", "power-off", "print", "puzzle-piece", "qrcode", "question", "question-circle", "question-circle-o", "quote-left", "quote-right", "random", "recycle", "refresh", "registered", "remove (alias)", "reorder (alias)", "reply", "reply-all", "retweet", "road", "rocket", "rss", "rss-square", "s15 (alias)", "search", "search-minus", "search-plus", "send (alias)", "send-o (alias)", "server", "share", "share-alt", "share-alt-square", "share-square", "share-square-o", "shield", "ship", "shopping-bag", "shopping-basket", "shopping-cart", "shower", "sign-in", "sign-language", "sign-out", "signal", "signing (alias)", "sitemap", "sliders", "smile-o", "snowflake-o", "soccer-ball-o (alias)", "sort", "sort-alpha-asc", "sort-alpha-desc", "sort-amount-asc", "sort-amount-desc", "sort-asc", "sort-desc", "sort-down (alias)", "sort-numeric-asc", "sort-numeric-desc", "sort-up (alias)", "space-shuttle", "spinner", "spoon", "square", "square-o", "star", "star-half", "star-half-empty (alias)", "star-half-full (alias)", "star-half-o", "star-o", "sticky-note", "sticky-note-o", "street-view", "suitcase", "sun-o", "support (alias)", "tablet", "tachometer", "tag", "tags", "tasks", "taxi", "television", "terminal", "thermometer (alias)", "thermometer-0 (alias)", "thermometer-1 (alias)", "thermometer-2 (alias)", "thermometer-3 (alias)", "thermometer-4 (alias)", "thermometer-empty", "thermometer-full", "thermometer-half", "thermometer-quarter", "thermometer-three-quarters", "thumb-tack", "thumbs-down", "thumbs-o-down", "thumbs-o-up", "thumbs-up", "ticket", "times", "times-circle", "times-circle-o", "times-rectangle (alias)", "times-rectangle-o (alias)", "tint", "toggle-down (alias)", "toggle-left (alias)", "toggle-off", "toggle-on", "toggle-right (alias)", "toggle-up (alias)", "trademark", "trash", "trash-o", "tree", "trophy", "truck", "tty", "tv (alias)", "umbrella", "universal-access", "university", "unlock", "unlock-alt", "unsorted (alias)", "upload", "user", "user-circle", "user-circle-o", "user-o", "user-plus", "user-secret", "user-times", "users", "vcard (alias)", "vcard-o (alias)", "video-camera", "volume-control-phone", "volume-down", "volume-off", "volume-up", "warning (alias)", "wheelchair", "wheelchair-alt", "wifi", "window-close", "window-close-o", "window-maximize", "window-minimize", "window-restore", "wrench", "american-sign-language-interpreting", "asl-interpreting (alias)", "assistive-listening-systems", "audio-description", "blind", "braille", "cc", "deaf", "deafness (alias)", "hard-of-hearing (alias)", "low-vision", "question-circle-o", "sign-language", "signing (alias)", "tty", "universal-access", "volume-control-phone", "wheelchair", "wheelchair-alt", "hand-grab-o (alias)", "hand-lizard-o", "hand-o-down", "hand-o-left", "hand-o-right", "hand-o-up", "hand-paper-o", "hand-peace-o", "hand-pointer-o", "hand-rock-o", "hand-scissors-o", "hand-spock-o", "hand-stop-o (alias)", "thumbs-down", "thumbs-o-down", "thumbs-o-up", "thumbs-up", "ambulance", "automobile (alias)", "bicycle", "bus", "cab (alias)", "car", "fighter-jet", "motorcycle", "plane", "rocket", "ship", "space-shuttle", "subway", "taxi", "train", "truck", "wheelchair", "wheelchair-alt", "genderless", "intersex (alias)", "mars", "mars-double", "mars-stroke", "mars-stroke-h", "mars-stroke-v", "mercury", "neuter", "transgender", "transgender-alt", "venus", "venus-double", "venus-mars", "file", "file-archive-o", "file-audio-o", "file-code-o", "file-excel-o", "file-image-o", "file-movie-o (alias)", "file-o", "file-pdf-o", "file-photo-o (alias)", "file-picture-o (alias)", "file-powerpoint-o", "file-sound-o (alias)", "file-text", "file-text-o", "file-video-o", "file-word-o", "file-zip-o (alias)", "circle-o-notch", "cog", "gear (alias)", "refresh", "spinner", "check-square", "check-square-o", "circle", "circle-o", "dot-circle-o", "minus-square", "minus-square-o", "plus-square", "plus-square-o", "square", "square-o", "cc-amex", "cc-diners-club", "cc-discover", "cc-jcb", "cc-mastercard", "cc-paypal", "cc-stripe", "cc-visa", "credit-card", "credit-card-alt", "google-wallet", "paypal", "area-chart", "bar-chart", "bar-chart-o (alias)", "line-chart", "pie-chart", "bitcoin (alias)", "btc", "cny (alias)", "dollar (alias)", "eur", "euro (alias)", "gbp", "gg", "gg-circle", "ils", "inr", "jpy", "krw", "money", "rmb (alias)", "rouble (alias)", "rub", "ruble (alias)", "rupee (alias)", "shekel (alias)", "sheqel (alias)", "try", "turkish-lira (alias)", "usd", "won (alias)", "yen (alias)", "align-center", "align-justify", "align-left", "align-right", "bold", "chain (alias)", "chain-broken", "clipboard", "columns", "copy (alias)", "cut (alias)", "dedent (alias)", "eraser", "file", "file-o", "file-text", "file-text-o", "files-o", "floppy-o", "font", "header", "indent", "italic", "link", "list", "list-alt", "list-ol", "list-ul", "outdent", "paperclip", "paragraph", "paste (alias)", "repeat", "rotate-left (alias)", "rotate-right (alias)", "save (alias)", "scissors", "strikethrough", "subscript", "superscript", "table", "text-height", "text-width", "th", "th-large", "th-list", "underline", "undo", "unlink (alias)", "angle-double-down", "angle-double-left", "angle-double-right", "angle-double-up", "angle-down", "angle-left", "angle-right", "angle-up", "arrow-circle-down", "arrow-circle-left", "arrow-circle-o-down", "arrow-circle-o-left", "arrow-circle-o-right", "arrow-circle-o-up", "arrow-circle-right", "arrow-circle-up", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "arrows", "arrows-alt", "arrows-h", "arrows-v", "caret-down", "caret-left", "caret-right", "caret-square-o-down", "caret-square-o-left", "caret-square-o-right", "caret-square-o-up", "caret-up", "chevron-circle-down", "chevron-circle-left", "chevron-circle-right", "chevron-circle-up", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "exchange", "hand-o-down", "hand-o-left", "hand-o-right", "hand-o-up", "long-arrow-down", "long-arrow-left", "long-arrow-right", "long-arrow-up", "toggle-down (alias)", "toggle-left (alias)", "toggle-right (alias)", "toggle-up (alias)", "arrows-alt", "backward", "compress", "eject", "expand", "fast-backward", "fast-forward", "forward", "pause", "pause-circle", "pause-circle-o", "play", "play-circle", "play-circle-o", "random", "step-backward", "step-forward", "stop", "stop-circle", "stop-circle-o", "youtube-play", "500px", "adn", "amazon", "android", "angellist", "apple", "bandcamp", "behance", "behance-square", "bitbucket", "bitbucket-square", "bitcoin (alias)", "black-tie", "bluetooth", "bluetooth-b", "btc", "buysellads", "cc-amex", "cc-diners-club", "cc-discover", "cc-jcb", "cc-mastercard", "cc-paypal", "cc-stripe", "cc-visa", "chrome", "codepen", "codiepie", "connectdevelop", "contao", "css3", "dashcube", "delicious", "deviantart", "digg", "dribbble", "dropbox", "drupal", "edge", "eercast", "empire", "envira", "etsy", "expeditedssl", "fa (alias)", "facebook", "facebook-f (alias)", "facebook-official", "facebook-square", "firefox", "first-order", "flickr", "font-awesome", "fonticons", "fort-awesome", "forumbee", "foursquare", "free-code-camp", "ge (alias)", "get-pocket", "gg", "gg-circle", "git", "git-square", "github", "github-alt", "github-square", "gitlab", "gittip (alias)", "glide", "glide-g", "google", "google-plus", "google-plus-circle (alias)", "google-plus-official", "google-plus-square", "google-wallet", "gratipay", "grav", "hacker-news", "houzz", "html5", "imdb", "instagram", "internet-explorer", "ioxhost", "joomla", "jsfiddle", "lastfm", "lastfm-square", "leanpub", "linkedin", "linkedin-square", "linode", "linux", "maxcdn", "meanpath", "medium", "meetup", "mixcloud", "modx", "odnoklassniki", "odnoklassniki-square", "opencart", "openid", "opera", "optin-monster", "pagelines", "paypal", "pied-piper", "pied-piper-alt", "pied-piper-pp", "pinterest", "pinterest-p", "pinterest-square", "product-hunt", "qq", "quora", "ra (alias)", "ravelry", "rebel", "reddit", "reddit-alien", "reddit-square", "renren", "resistance (alias)", "safari", "scribd", "sellsy", "share-alt", "share-alt-square", "shirtsinbulk", "simplybuilt", "skyatlas", "skype", "slack", "slideshare", "snapchat", "snapchat-ghost", "snapchat-square", "soundcloud", "spotify", "stack-exchange", "stack-overflow", "steam", "steam-square", "stumbleupon", "stumbleupon-circle", "superpowers", "telegram", "tencent-weibo", "themeisle", "trello", "tripadvisor", "tumblr", "tumblr-square", "twitch", "twitter", "twitter-square", "usb", "viacoin", "viadeo", "viadeo-square", "vimeo", "vimeo-square", "vine", "vk", "wechat (alias)", "weibo", "weixin", "whatsapp", "wikipedia-w", "windows", "wordpress", "wpbeginner", "wpexplorer", "wpforms", "xing", "xing-square", "y-combinator", "y-combinator-square (alias)", "yahoo", "yc (alias)", "yc-square (alias)", "yelp", "yoast", "youtube", "youtube-play", "youtube-square", "ambulance", "h-square", "heart", "heart-o", "heartbeat", "hospital-o", "medkit", "plus-square", "stethoscope", "user-md", "wheelchair", "wheelchair-alt");
            var settings = $.extend({

            }, options);
            return this.each( function() {
                element=this;
                if(!settings.buttonOnly && $(this).data("iconPicker")==undefined ){
                    $this=$(this).addClass("form-control");
                    $wraper=$("<div/>",{class:"input-group"});
                    $this.wrap($wraper);

                    $button=$("<span class=\"input-group-addon pointer\"><i class=\"fa fa-file-image-o fa-2x\"></i></span>");
                    $this.after($button);
                    (function(ele){
                        $button.click(function(){
                            createUI(ele);
                            showList(ele,icons);
                        });
                    })($this);

                    $(this).data("iconPicker",{attached:true});
                }

                function createUI($element){
                    $popup=$('<div/>',{
                        css: {
                            'top':$element.offset().top+$element.outerHeight()+6,
                            'left':$element.offset().left
                        },
                        class:'micon-popup'
                    })

                    $popup.html('<div class="ip-control"> \
						          <ul> \
						            <li><a href="javascript:;" class="btn" data-dir="-1"><span class="fa  fa-fast-backward"></span></a></li> \
						            <li><input type="text" class="ip-search" placeholder="Search" /></li> \
						            <li><a href="javascript:;"  class="btn" data-dir="1"><span class="fa  fa-fast-forward"></span></a></li> \
						          </ul> \
						      </div> \
						     <div class="micon-list"> </div> \
					         ').appendTo("body");


                    $popup.addClass('dropdown-menu').show();
                    $popup.mouseenter(function() {  mouseOver=true;  }).mouseleave(function() { mouseOver=false;  });

                    var lastVal="", start_index=0,per_page=30,end_index=start_index+per_page;
                    $(".ip-control .btn",$popup).click(function(e){
                        e.stopPropagation();
                        var dir=$(this).attr("data-dir");
                        start_index=start_index+per_page*dir;
                        start_index=start_index<0?0:start_index;
                        if(start_index+per_page<=975){
                            $.each($(".micon-list>ul li"),function(i){
                                if(i>=start_index && i<start_index+per_page){
                                    $(this).show();
                                }else{
                                    $(this).hide();
                                }
                            });
                        }else{
                            start_index=960;
                        }
                    });

                    $('.ip-control .ip-search',$popup).on("keyup",function(e){
                        if(lastVal!=$(this).val()){
                            lastVal=$(this).val();
                            if(lastVal==""){
                                showList(icons);
                            }else{
                                showList($element, $(icons)
                                    .map(function(i,v){
                                        if(v.toLowerCase().indexOf(lastVal.toLowerCase())!=-1){return v}
                                    }).get());
                            }

                        }
                    });
                    $(document).mouseup(function (e){
                        if (!$popup.is(e.target) && $popup.has(e.target).length === 0) {
                            removeInstance();
                        }
                    });

                }
                function removeInstance(){
                    $(".micon-popup").remove();
                }
                function showList($element,arrLis){
                    $ul=$("<ul>");

                    for (var i in arrLis) {
                        $ul.append("<li><a href=\"#\" title="+arrLis[i]+"><span class=\"fa  fa-"+arrLis[i]+" fa-faw\"></span></a></li>");
                    };

                    $(".micon-list",$popup).html($ul);
                    $(".micon-list li a",$popup).click(function(e){
                        e.preventDefault();
                        var title=$(this).attr("title");
                        $element.val("fa fa-"+title);
                        removeInstance();
                    });
                }

            });
        }

    }(jQuery));</script>
<script type="text/javascript">
    $(function () {
        $(".micon-picker").iconPicker();
    });
</script>
<input type="text" name="{$addons_data.name}" class="text input-large micon-picker" value="{$addons_data.value}"/>


